<template>
  <div class="notice_item">
    <img src="@/assets/vue.svg" />
    <div class="notice_item__right">
      <span class="title">xxx在研究任务中心给你发了一条修改评论的消息</span>
      <span class="date">2小时前</span>
    </div>
    <!-- <div class="action ">
      <span @click="showAction">
        <icon-ic-twotone-chevron-left />
      </span>
      <Transition enter-active-class="animate__fadeInRightBig" leave-active-class="animate__fadeOutRightBig">

        <div v-show="show" class="animate__animated">
          123
        </div>
      </Transition>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';


const show = ref(false)

function showAction() {
  show.value = !show.value
}



</script>

<style scoped lang="scss">
.notice_item {
  padding: 10px 20px;
  border-bottom: 1px solid #ccc;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;

  >img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;

    border-radius: 50%;
  }

  &__right {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1;

    .title {
      font-size: 16px;
    }

    .date {
      font-size: 12px;
      color: #bbb;
    }
  }
}

.action {
  display: flex;
  align-items: center;
  height: 60px;

  >span {
    padding: 20px 5px;
    background-color: rgba($color: #000000, $alpha: .1);
    color: white;
    border-radius: 10px;
  }
}
</style>